<!--
 * @Author: your name
 * @Date: 2021-12-25 18:54:28
 * @LastEditTime: 2022-01-02 02:30:58
 * @LastEditors: Please set LastEditors
 * @Description: 打list开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \order-ui2\src\pages\news\engSup.vue
-->
<template>
  <div class="class0">
    <div class="header">
      <div
        style="
          font-size: 20px;
          color: #7232dd;
          margin-top: 15px;
          margin-left: 15px;
        "
      >
        <i class="el-icon-s-goods"></i>商品类别销售额详情
      </div>
    </div>

    <div class="class2">
      <div id="main2" style="width: 1200px; height: 400px"></div>
    </div>
    <div style="color: #7232dd; font-size: 15px;text-align: center; ">
      产品分类销售额折线图
    </div>

    <!-- <div
      style="
        height: 2px;
        background-color: rgb(235, 235, 235);
        margin-left: 5px;
        margin-right: 5px;
      "
    ></div> -->

    <el-divider></el-divider>

    <div class="class3">
      <div id="main3" style="width: 1100px; height: 400px"></div>
    </div>
    <div style="color: #7232dd; font-size: 15px;text-align: center; ">
      产品分类销售额柱状图
    </div>

    <div style="height:20px"></div>
  </div>
</template>
    </div>
  </div>
</template>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      value: "",
      page: 1,
      pageSize: 200,
      tiyu: 0,
      peishi: 0,
      xiangbao: 0,
      fushi: 0,
      huazhuang: 0,
      lingshi: 0,
      riyong: 0,
      shuma: 0,
      proName: [],
      num: [],
      proCateName: [],
    };
  },
  // 生命周期函数
  created() {
    // this.getProCategoryData();
    // this. getProductData();
  },
  methods: {
    ...mapActions("product", ["getProductDataVuex", "getProCategoryDataVuex"]),

    // 产品所有数据
    // 分类名字获取
    getProductData1() {
      let param = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.getProCategoryDataVuex(param).then((res) => {
        res.list.forEach((item) => {
          this.proCateName.push(item.name);
        });
      });
      console.log(this.proCateName, "------45545664645");
    },
    // 产品分类数据
    getProductData() {
      let param = {
        page: 1,
        pageSize: 200,
      };
      this.getProductDataVuex(param).then((res1) => {
        res1.list.forEach((item) => {
          console.log(item, "15153115313");
          // this.proSales.push(item.sales);
          // console.log(this.proName);
          if (item.productCategoryId == 9462) {
            this.tiyu += item.sales * item.price;
          }
          if (item.productCategoryId == 9461) {
            this.peishi += item.sales * item.price;
          }
          if (item.productCategoryId == 9460) {
            this.xiangbao += item.sales * item.price;
          }
          if (item.productCategoryId == 9453) {
            this.fushi += item.sales * item.price;
          }
          if (item.productCategoryId == 9451) {
            this.huazhuang += item.sales * item.price;
          }
          if (item.productCategoryId == 9450) {
            this.lingshi += item.sales * item.price;
          }
          if (item.productCategoryId == 9449) {
            this.riyong += item.sales * item.price;
          }
          if (item.productCategoryId == 9448) {
            this.shuma += item.sales * item.price;
          }
        });

        console.log(this.tiyu, "11255");
        var myChart2 = echarts.init(document.getElementById("main2"));
        // 指定图表的配置项和数据
        var option2 = {
          xAxis: {
            data: this.proCateName,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                this.tiyu,
                this.peishi,
                this.xiangbao,
                this.fushi,
                this.huazhuang,
                this.lingshi,
                this.riyong,
                this.shuma,
              ],
              type: "line",
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);

        var myChart3 = echarts.init(document.getElementById("main3"));
        // 指定图表的配置项和数据
        var option3 = {
          xAxis: {
            type: "category",
            data: this.proCateName,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [
                this.tiyu,
                this.peishi,
                this.xiangbao,
                this.fushi,
                this.huazhuang,
                this.lingshi,
                this.riyong,
                this.shuma,
              ],
              type: "bar",
              showBackground: true,
              backgroundStyle: {
                color: "#7232dd",
              },
            },
          ],
        };
        myChart3.setOption(option3);
      });
    },

    // 柱状图 销售额对比

    // 饼状图 销售额占比
  },

  mounted() {
    // this.myEcharts2();
    // this.myEcharts3();

    this.getProductData();
    this.getProductData1();
  },
  computed: {
    ...mapState("product", ["productData", "proCategory"]),
  },
};
</script>

<style scoped>
.class0 {
  min-height: calc(100vh);
}
.class1 {
  
}
.class2 {
}
.class3 {
}
</style>
